<template>
  <div class="newinfo-container">
    <!-- 标题部分 -->  
    <h1 class="title">{{ newInfo.title }}</h1>

    <!-- 子标题部分 -->
    <p class="subtitle">
      <span>发表时间: {{ newInfo.add_time | dateFormat }}</span>
      <span>点击:{{ newInfo.click }}次</span>
    </p>

    <hr>
    <!-- 内容部分 -->
    <div class="content" v-html="newInfo.content"></div>

    <!-- 评论部分 -->
    <com-box :id="this.id"></com-box>
  </div>
</template>

<script>
import Toast from 'mint-ui'
import comment from '../subcomps/comment.vue'
export default {
  data() {
    return {
      id: this.$route.params.id,
      newInfo: {}
    };
  },
  created(){
      this.getNewInfo()
  },
  methods: {
      getNewInfo(){
          this.$http.get('getnew/' + this.id).then(res => {
              if(res.body.status === 0){
                  this.newInfo = res.body.message[0]
                  console.log(this.newInfo)
              }else{
                  Toast('获取失败...')
              }
          })
      }
  },
  components: {
      'com-box': comment
}
}

</script>

<style lang="scss" scoped>
    .newinfo-container{

        padding: 0 5px 50px 5px;
        .title{
            color: red;
            font-size: 16px;
            text-align: center;
            margin: 15px;
        }
        .subtitle{
            display: flex;
            justify-content: space-between;
            color: #246aff;
        }
    }
</style>